<template>
	<view class="badgePage">
		<view class="badge" v-if="type=='business-group'">
			<view style="margin-top: 10rpx;">
				<svg-icon icon="官方群" :width="34"></svg-icon>
			</view>
			<view>
				<text class="tips">{{title}}</text>
			</view>
		</view>

		<view class="badge2" v-if="type=='official-group'">
			<img :src="getResource('/icon/Badge02.png')" alt="" class="badge-img">
		</view>

		<view class="badge3" v-if="type=='friend-group'">
			<img :src="getResource('/icon/Badge05.png')" alt="" class="badge-img">
		</view>
	</view>
</template>

<script>
	export default {
		name: "badge",
		props: {
			type: {
				type: String,
			},
			title: {
				type: String,
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.badgePage {
		.badge {
			width: 130rpx;
			height: 30rpx;
			padding: 4rpx 12rpx 4rpx 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 4rpx;
			border: 2rpx solid #B8CFFF;
			border-radius: 24rpx;
			background-image: linear-gradient(to right, #F2F6FF, #EDF3FF, #B8CFFF);
			position: relative;
			background-clip: padding-box;
			/*important*/

			.tips {
				flex: 1;
				font-weight: 500;
				font-size: 20rpx;
				line-height: 60rpx;
				// #ifdef H5
				// background-image: linear-gradient(to right, #3C6CCC, #162D5C, #091F4D);
				// color: transparent;
				// #endif
				background-clip: text;
				white-space: nowrap;
			}
		}

		// .badge::before {
		// 	content: '';
		// 	position: absolute;
		// 	top: 0;
		// 	right: 0;
		// 	left: 0;
		// 	bottom: 0;
		// 	z-index: -1;
		// 	margin: -1px;
		// 	border-radius: inherit;
		// 	/*important*/
		// 	background: linear-gradient(to right, #ADC8FF, #7EA8FF, #5583DE);
		// }

		.badge2 {
			width: 100%;

			.badge-img {
				width: 108rpx;
				height: 36rpx;
			}
		}

		.badge3 {
			width: 100%;
			height: 36rpx;

			.badge-img {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}
</style>